<!--
 * @Description: 月视图
 * @Author: wws1993
 * @Date: 2020-12-04 10:50:05
 * @LastEditTime: 2020-12-14 11:14:44
 * @LastEditors: wws1993
 * @FilePath: \TODO-MANAGER\src\components\CalendarViewModule\viewMonth.vue
-->

<template>
  <div style="height:100%">
    <section class="CalendarView-context-container-header">
      <span>周日</span>
      <span>周一</span>
      <span>周二</span>
      <span>周三</span>
      <span>周四</span>
      <span>周五</span>
      <span>周六</span>
    </section>
    <section class="CalendarView-context-container-body"
        ref="view"
        @mousedown="handleMousedown"
        @mousemove="handleMousemove"
        @mouseup="handleMouseup"
      >
      <div
        v-for="(item, key) in data"
        :key="key"
        :data-date="item.date"
        :class="{
          'month-days': true,
          'month-placeholder': !item.isCurMonth,
          'month-today': item.isToday,
        }">

        <code class="day">{{item.day}}</code>
        <div class="day-todos">
          <template v-for="(todo, todoKey) in item.events">
            <code
              :key="todoKey"
              :class="`todo ${todo.type} ${clickMode === false && todo.id !== clickTodo.id ? 'hidden' : ''}`"
              :data-weight="todo.weight"
              :data-todoEvents="JSON.stringify(todo)"
              @dblclick="openManage(todo)"
              >
              {{todo.subject}}
            </code>
          </template>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import {Component, Prop} from 'vue-property-decorator';
import { mapActions, mapState } from 'vuex';
import TodoManageModal from '@/service/TodoManageModal';

@Component({
  props: ['data'],
  data() {
    return {
      clickMode: undefined,   // 是否点击
      clickTodo: undefined,   // 本次点击或拖动对象
      clickNode: undefined,   // 本次拖动对象
    };
  },
  methods: {
    ...mapActions(['openManage', 'updateManage']),
    handleMousedown(event: MouseEvent) {
      const node = event.target as HTMLElement;
      const todo = node.dataset.todoevents;

      if (todo) {
        this.clickTodo = JSON.parse(todo);
        this.clickNode = node;
        this.clickMode = true;
      }
    },
    handleMousemove(event: MouseEvent) {
      if (typeof this.clickMode !== 'undefined') {
        this.clickMode = false;

        const node = this.clickNode as HTMLElement;

        node.style.width = node.offsetWidth + 'px';
        node.style.position = 'fixed';
        node.style.top = (event.movementY + node.offsetTop) + 'px';
        node.style.left = (event.movementX + node.offsetLeft)  + 'px';
        node.style.zIndex = '1';
      }
    },
    handleMouseup(event: MouseEvent) {
      if (this.clickMode) {
        this.openManage(this.clickTodo);
      } else if (this.clickTodo) {
        // 修改时间
        const node = this.clickNode as HTMLElement;
        const view = this.$refs.view as HTMLElement;
        // 根据x轴偏移量 计算当前拖拽到x轴的下标
        const xIdx = Math.floor(node.offsetLeft / (view.offsetWidth / 7));
        // 根据y轴偏移量 计算当前拖拽到y轴的下标
        const yIdx = Math.floor(node.offsetTop / (view.offsetHeight / 6));
        // 日期下标
        const idx = ((yIdx - 1) * 7) + xIdx;
        // 查找dom
        const curDateNode = view.children[idx] as HTMLElement | undefined;

        if (curDateNode) {
          // 修改后的日期
          const modeifyDate = curDateNode.dataset.date;
          const todo = this.clickTodo as Manage.Instance;
          switch (todo.type) {
            case 'close':
              todo.startTime = new Date(`${modeifyDate} ${todo.startTime.substr(11, 8)}`).format('yyyy/MM/dd hh:mm:ss');
              todo.endTime = new Date(`${modeifyDate} ${todo.endTime.substr(11, 8)}`).format('yyyy/MM/dd hh:mm:ss');
              break;
            case 'close-left':
              todo.startTime = new Date(`${modeifyDate} ${todo.startTime.substr(11, 8)}`).format('yyyy/MM/dd hh:mm:ss');
              break;
            case 'close-right':
              todo.endTime = new Date(`${modeifyDate} ${todo.endTime.substr(11, 8)}`).format('yyyy/MM/dd hh:mm:ss');
              break;
            default:
              break;
          }

          if (new Date(todo.startTime).getTime() > new Date(todo.endTime).getTime()) {
            const clone = [todo.startTime, todo.endTime];
            todo.startTime = clone[1];
            todo.endTime = clone[0];
          }

          this.$store.dispatch('updateManage', todo);
        }
      }

      this.reset();
    },
    reset() {
      const node = this.clickNode as HTMLElement;
      if (node) {
        node.style.top = '';
        node.style.left = '';
        node.style.width = '';
        node.style.zIndex = '';
        node.style.position = '';
      }

      this.clickMode = undefined;
      this.clickTodo = undefined;
      this.clickNode = undefined;
    },
  },
})
export default class ViewMonth extends Vue {}
</script>
